<template>
  <div class="reading">
    <div class="reading-header">
      <div class="title">试卷</div>
      <div class="name">学员：李达</div>
    </div>
    <div class="reading-wrap">
      <div class="reading-type-title">单选题<span>该部分说明文字</span></div>
      <div class="reading-item">
        <div class="topic-title">
          1、<span class="type">单选</span>（5分）在网站的浏览过程中是否有引起您不适的信浏览过程中是否有引起您不适的信（
          ）？
        </div>
        <el-radio-group v-model="radio" class="topic-options">
          <el-radio :label="3" class="error">A.经常</el-radio>
          <el-radio :label="6" class="correct">A.经常</el-radio>
          <el-radio :label="9">A.经常</el-radio>
        </el-radio-group>
        <div class="topic-answer">学员回答：<span>B</span></div>
        <div class="topic-parsing-btn">收起解析 <i class="el-icon-arrow-up" /></div>
        <div class="topic-parsing">
          <div class="answer-correct">正确答案：<span>C</span></div>
          <div class="answer-desc">
            <span>解析：</span>
            不适的信在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起您不适的在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起
          </div>
        </div>
      </div>

      <div class="reading-type-title">填空题<span>该部分说明文字</span></div>
      <div class="reading-item">
        <div class="topic-title">
          1、<span class="type">填空</span>（5分）在网站的浏览过程中是否有引起您不适的信浏览过程中是否有引起您不适的信（
          ）？
        </div>
        <div class="topic-answer">学员回答：<span>京东暗沉</span></div>
        <div class="topic-parsing-btn">收起解析 <i class="el-icon-arrow-up" /></div>
        <div class="topic-parsing">
          <div class="answer-correct">正确答案：<span>C</span></div>
          <div class="answer-desc">
            <span>解析：</span>
            不适的信在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起您不适的在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起
          </div>
        </div>
        <div class="topic-score">打分<el-input-number v-model="num" size="mini" /></div>
      </div>

      <div class="reading-type-title">材料题<span>该部分说明文字</span></div>
      <div class="material-item">
        <div class="topic-title">
          1、<span class="type">材料</span>（5分）网站的浏览过程中是否有引起您不适的信浏览过程中是否有引起您不适的信适的信浏览过程中是否有引起您不适的不适的信适的信浏览过程中是否有引起您不适的不适的信适的信浏览过程中是否有引起您不适的不适的信适的信浏览过程中是否有引起您不适的
        </div>
        <div class="reading-item">
          <div class="topic-title">
            1、<span class="type">填空</span>（5分）在网站的浏览过程中是否有引起您不适的信浏览过程中是否有引起您不适的信（ ）？
          </div>
          <div class="topic-answer">学员回答：<span>京东暗沉</span></div>
          <div class="topic-parsing-btn">收起解析 <i class="el-icon-arrow-up" /></div>
          <div class="topic-parsing">
            <div class="answer-correct">正确答案：<span>C</span></div>
            <div class="answer-desc">
              <span>解析：</span>
              不适的信在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起您不适的在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起
            </div>
          </div>
          <div class="topic-score">打分<el-input-number v-model="num" size="mini" /></div>
        </div>
        <div class="reading-item">
          <div class="topic-title">
            1、<span class="type">填空</span>（5分）在网站的浏览过程中是否有引起您不适的信浏览过程中是否有引起您不适的信（ ）？
          </div>
          <div class="topic-answer">学员回答：<span>京东暗沉</span></div>
          <div class="topic-parsing-btn">收起解析 <i class="el-icon-arrow-up" /></div>
          <div class="topic-parsing">
            <div class="answer-correct">正确答案：<span>C</span></div>
            <div class="answer-desc">
              <span>解析：</span>
              不适的信在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起您不适的在网站的浏览过程中否有引起您不适的信浏览否有引起您不适的信否有引起
            </div>
          </div>
          <div class="topic-score">打分<el-input-number v-model="num" size="mini" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '',
      num: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.reading {
  padding: 17px 77px 20px 20px;
  .reading-header {
    height: 38px;
    padding-left: 10px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(44, 146, 248, 0.05);
    .title {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      color: #606266;
    }
  }
  .reading-wrap {
    max-width: 860px;
    .reading-type-title {
      margin-top: 25px;
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      span {
        font-size: 12px;
        font-weight: 400;
        color: #606266;
        margin-left: 6px;
      }
    }
    .reading-item {
      border-bottom: 1px solid #ebeef5;
      padding: 16px 0;
    }
    .topic-title {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
      .type {
        padding: 1px 5px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        background: #5191ff;
        border-radius: 2px;
      }
    }
    .topic-options {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      ::v-deep.el-radio {
        margin-right: 0;
        padding: 6px 0;
        .el-radio__label {
          color: #303133;
        }
        .el-radio__inner:hover {
          border-color: #dcdfe6;
        }
        &.error {
          .el-radio__input.is-checked .el-radio__inner {
            border-color: #f54030;
            background: #f54030;
          }
        }
        &.correct {
          .el-radio__input.is-checked .el-radio__inner {
            border-color: #67c23a;
            background: #67c23a;
          }
        }
      }
    }
    .topic-answer {
      margin-top: 14px;
      font-size: 13px;
      font-weight: 400;
      color: #909399;
      span {
        color: #303133;
      }
    }
    .topic-parsing-btn {
      margin-top: 14px;
      font-size: 13px;
      font-weight: 400;
      color: #5191ff;
    }
    .topic-parsing {
      margin-top: 10px;
      padding: 10px;
      background: #f7f7f7;
      border-radius: 6px;
      .answer-correct {
        font-size: 13px;
        font-weight: 400;
        color: #909399;
        span {
          color: #67c23a;
        }
      }
      .answer-desc {
        margin-top: 5px;
        font-size: 13px;
        font-weight: 400;
        color: #303133;
        line-height: 20px;
        span {
          color: #909399;
        }
      }
    }
    .topic-score {
      margin-top: 20px;
      font-size: 13px;
      font-weight: 400;
      color: #303133;
      .el-input-number {
        margin-left: 10px;
      }
    }
    .material-item {
      margin-top: 16px;
    }
  }
}
</style>
